<template>
 <div>
  <NuxtLayout name="backgroud">
    <div class="articdetail" v-loading="loading">
      <MdEditorV3 v-if="blogDetail" :blogDetails="blogDetail"/>
      <div class="articdetail-share">
        <Share />
      </div>
      <div class="articdetail-comment">
        <h2>评论区：</h2>
        <Comment :comment="blogComment" />
      </div>
      <div class="articdetail-reply">
        <reply-comment ref="ReplyRef" @submitReply="submitReply" />
      </div>
     </div>
  </NuxtLayout>
 </div>
</template>

<script setup lang="ts">
import { getBlogDetail,getBlogComment,addBlogComment } from "../../service/api/blog"
import { useNotification } from 'naive-ui'
const notification = useNotification()
const route = useRoute();
const id = ref(route.query.id)
let loading = ref(false)
//博客详情
const blogDetail = ref(null)
//博客评论
const blogComment = ref()
//回复评论ref
const ReplyRef = ref(null)
const commentMsg = useComment()
let initData = ref({
  type:null,
  rId:id
})
//查询博客详情
const getOneBlog = async () => {
  await nextTick()
  loading.value = true
  const res:any = await getBlogDetail({id:id})
  const data = res.data._rawValue
  if(data.code == 200){
    blogDetail.value = data.data
    loading.value = false
  }
}
//查询博客评论
const getBlogCommentList = async ()=>{
  await nextTick()
  const res:any = await getBlogComment({id:id})
  const data = res.data._rawValue
  if(data.code == 200){
    blogComment.value = data.data
  }
}
//回复评论
const submitReply = async (params:any,isReply:any) => {
  try {
    let res:any = await addBlogComment(params) 
    getBlogCommentList()
    notification['success']({
      content: '提示',
      meta: res.data._rawValue.message,
      duration: 2500,
      keepAliveOnHover: true
    })
    nextTick(() => {
      ReplyRef.value?.resetPage()
      commentMsg.value = initData.value
    })
  } catch(err) {
    console.log(err)
  }
}
onMounted(() => {
  commentMsg.value = initData.value
  getOneBlog()
  getBlogCommentList()
})
</script>
<script lang="ts">
export default {
 layout:false
}
</script>

<style scoped lang="scss">
.articdetail{
 width: 80%;
 padding-top: 20px;
 margin: 0 auto;
 &-comment{
  background-color: rgba($color: #fff, $alpha: .6);
  padding: 20px;
  border-radius: 6px;
  margin-top: 10px;
  margin-left: 270px;
  margin-right: 250px;
  h2{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
  }
 }
 &-reply{
  background-color: rgba($color: #fff, $alpha: .6);
  padding: 20px;
  border-radius: 6px;
  margin-top: 10px;
  margin-left: 270px;
  margin-right: 250px;
 }
 &-share{
  background-color: rgba($color: #fff, $alpha: .6);
  padding: 20px;
  border-radius: 6px;
  margin-top: 10px;
  margin-left: 270px;
  margin-right: 250px;
 }
}
</style>